<template>
  <div class="sub-nav">
    <!-- 顶部标题栏 -->
    <div class="top-header">
      <div class="header-title">天天领好礼</div>
    </div>

    <div class="content-container">
      <!-- 左侧菜单 -->
      <div class="sub-section">
        <div class="item"
          v-for="item in items"
          :key="item.text"
          :class="{ active: item.text === '签到领京豆' }">
          {{ item.text }}
        </div>
      </div>

      <div class="main-section">
        <!-- 京豆信息区域 -->
        <div class="bean-cards-container">
          <!-- 我的京豆卡片 -->
          <div class="bean-card">
            <div class="card-header">
              <span class="title">我的京豆</span>
              <span class="link">京豆说明</span>
            </div>
            <div class="card-content">
              <div class="bean-info">
                <div class="bean-number">11</div>
                <img :src="goldDou" alt="京豆" class="bean-icon">
                <div class="discount">可抵￥0.11</div>
              </div>
              <div class="card-footer">
                <div class="footer-text">京豆下单可抵现金</div>
              </div>
            </div>
          </div>

          <!-- 签到领京豆卡片 -->
          <div class="bean-card signin-card">
            <div class="card-header">
              <span class="title">签到领京豆</span>
              <span class="link">如何领京豆</span>
            </div>
            <div class="card-content">
              <div class="signin-progress">
                <!-- 签到进度条 -->
                <div class="progress-bar">
                  <div class="progress-step completed">
                    <div class="step-icon">✓</div>
                    <div class="step-text">连签1天</div>
                  </div>
                  <div class="progress-line"></div>
                  <div class="progress-step">
                    <div class="step-icon"></div>
                    <div class="step-text">明天</div>
                  </div>
                  <div class="progress-line"></div>
                  <div class="progress-step">
                    <div class="step-icon plus">+10</div>
                    <div class="step-text">后天可领</div>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <button class="signin-button">赚更多京豆</button>
              </div>
            </div>
          </div>

          <!-- 京东游戏大厅卡片 -->
          <div class="bean-card game-card">
            <div class="card-header">
              <span class="title">京东游戏大厅</span>
            </div>
            <div class="card-content">
              <div class="game-items">
                <div class="game-item">
                  <div class="game-icon">🎮</div>
                  <div class="game-text">精选推荐</div>
                </div>
                <div class="game-item">
                  <div class="game-icon">🔥</div>
                  <div class="game-text">热门新游</div>
                </div>
                <div class="game-item">
                  <div class="game-icon">🎁</div>
                  <div class="game-text">海量福利</div>
                </div>
              </div>
              <div class="card-footer">
                <button class="goto-button">立即前往 <span class="arrow">→</span></button>
              </div>
            </div>
          </div>
          <!-- 抽奖组件 -->

        </div>
      </div>
      <RaffleView />
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import goldDou from '../../../assets/imgs/signin/gold_douzi.png';
import RaffleView from './RaffleView.vue'
// 左侧菜单项
const items = ref([
  { text: '签到领京豆' },
  { text: '任务中心' },
  { text: '京豆商城' },
  { text: '我的京豆' },
  { text: '京豆明细' }
]);
</script>

<style scoped lang="scss">
.sub-nav {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  .top-header {
    background-color: #fff;
    padding: 10px 60px;
    border-bottom: 1px solid #eee;

    .header-title {
      font-size: 18px;
      color: #e1251b;
      font-weight: bold;
    }
  }

  .content-container {
    display: flex;
    padding: 0 60px;
  }

  .sub-section {
    flex: 0 0 180px;
    padding: 20px 0;
    border-right: 1px solid #eee;

    .item {
      padding: 12px 15px;
      cursor: pointer;
      font-size: 14px;
      margin-bottom: 5px;

      &:hover, &.active {
        color: #e1251b;
        background-color: #f1f1f1;
      }

      &.active {
        font-weight: 500;
      }
    }
  }

  .main-section {
    flex: 1;

    .bean-cards-container {
      display: grid;
      grid-template-columns: 1fr 1.5fr 1fr;
      gap: 15px;
    }

    .bean-card {
      background-color: #fff;
      border-radius: 8px;
       border: 1px dashed rgb(245, 151, 148);
       background-image: url('../../../assets/imgs/signin/douzi_bgimg.png') left top/100% 100% no-repeat;
      // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 220px;

      .card-header {
        display: flex;
        justify-content: space-between;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;

        .title {
          font-size: 16px;
          font-weight: 700;
        }

        .link {
          font-size: 14px;
          color: #e1251b;
          cursor: pointer;
        }
      }

      .card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 15px;

        .bean-info {
          display: flex;
          align-items: center;

          .bean-number {
            font-size: 42px;
            color: #e1251b;
            font-weight: bold;
            line-height: 1;
          }

          .bean-icon {
            width: 36px;
            height: 36px;
            margin: 0 8px;
          }

          .discount {
            font-size: 12px;
            color: #fff;
            background-color: #ff5c5c;
            padding: 2px 6px;
            border-radius: 10px;
          }
        }

        .signin-progress {
          width: 100%;
          margin-bottom: 20px;

          .progress-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;

            .progress-step {
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;
              z-index: 2;

              .step-icon {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background-color: #f0f0f0;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 8px;
                color: #fff;
                font-size: 14px;

                &.plus {
                  background-color: #fff4d6;
                  color: #ff8f1f;
                  font-weight: bold;
                }
              }

              .step-text {
                font-size: 12px;
                color: #666;
              }

              &.completed .step-icon {
                background-color: #e1251b;
                color: white;
              }
            }

            .progress-line {
              flex: 1;
              height: 4px;
              background-color: #f0f0f0;
              position: relative;
              z-index: 1;
              margin: 0 10px;

              &:first-of-type {
                background-color: #e1251b;
              }
            }
          }
        }

        .game-items {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 15px;

          .game-item {
            display: flex;
            align-items: center;

            .game-icon {
              width: 24px;
              height: 24px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 10px;
              background-color: #f9f9f9;
              border-radius: 4px;
            }

            .game-text {
              font-size: 14px;
            }
          }
        }
      }

      .card-footer {
        // padding-top: 10px;
        text-align: center;

        .footer-text {
          margin-top: 20px;
          font-size: 14px;
          color: #666;
        }

        .signin-button {
          width: 100%;
          padding: 10px;
          background-color: #e1251b;
          color: white;
          border: none;
          border-radius: 20px;
          cursor: pointer;
          font-size: 14px;

          &:hover {
            background-color: #c1151b;
          }
        }

        .goto-button {
          padding: 6px 15px;
          background-color: white;
          color: #e1251b;
          border: 1px solid #e1251b;
          border-radius: 20px;
          cursor: pointer;
          font-size: 14px;
          display: inline-flex;
          align-items: center;

          .arrow {
            margin-left: 4px;
            font-size: 16px;
          }

          &:hover {
            background-color: #fff0f0;
          }
        }
      }
    }
  }
}
</style>
